<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能随机抽号系统</title>
    <style>
        :root {
            --primary: #6366f1;
            --primary-hover: #4f46e5;
            --success: #22c55e;
            --error: #ef4444;
            --bg: #f8fafc;
            --card-bg: #ffffff;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: var(--bg);
            line-height: 1.6;
        }

        .container {
            background: var(--card-bg);
            padding: 2.5rem;
            border-radius: 1.5rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            width: 90%;
            max-width: 680px;
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--success) 100%);
        }

        h1 {
            color: #1e293b;
            font-weight: 700;
            font-size: 2.2rem;
            margin-bottom: 2.5rem;
            text-align: center;
        }

        .settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .input-group {
            position: relative;
        }

        .input-group label {
            display: block;
            color: #64748b;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            padding-left: 0.5rem;
        }

        input {
            width: 70%;
            padding: 0.9rem 1.2rem;
            border: 2px solid #e2e8f0;
            border-radius: 0.8rem;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: #f8fafc;
        }

        input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
            background: white;
        }

        input::placeholder {
            color: #94a3b8;
        }

        button {
            width: 100%;
            padding: 1.1rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 0.8rem;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 1.5rem 0;
        }

        button:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
        }

        #result {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1e293b;
            text-align: center;
            padding: 2rem;
            background: #f1f5f9;
            border-radius: 1rem;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .result-number {
            background: var(--primary);
            color: white;
            padding: 0.4rem 1rem;
            border-radius: 0.6rem;
            display: inline-block;
            animation: popIn 0.3s ease;
        }

        .error {
            color: var(--error);
            font-size: 0.9rem;
            margin: 0.5rem 0;
            text-align: center;
            min-height: 1.2rem;
        }

        @keyframes popIn {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-6px); }
            75% { transform: translateX(6px); }
        }

        .shake {
            animation: shake 0.3s ease-in-out;
        }

        @media (max-width: 480px) {
            .container {
                padding: 1.5rem;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            #result {
                font-size: 1.8rem;
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 智能随机抽号系统</h1>
        
        <div class="settings-grid">
            <div class="input-group">
                <label>最小值</label>
                <input type="number" id="min" placeholder="输入最小值" value="1">
            </div>
            
            <div class="input-group">
                <label>最大值</label>
                <input type="number" id="max" placeholder="输入最大值" value="100">
            </div>
            
            <div class="input-group">
                <label>抽取数量</label>
                <input type="number" id="count" placeholder="输入抽取数量" value="1" min="1">
            </div>
            
            <div class="input-group">
                <label>必抽数字（英文!!逗号分隔）</label>
                <input type="text" id="targets" placeholder="例如：5, 10, 15">
            </div>
        </div>

        <div class="error" id="error"></div>

        <button onclick="startDraw()">✨ 开始随机抽取</button>
        
        <div id="result"></div>
    </div>

    <script>
        let isDrawing = false;
        let drawInterval;

        function parseTargets(input) {
            return input.split(',')
                .map(x => x.trim())
                .filter(x => x !== '')
                .map(x => parseInt(x))
                .filter(x => !isNaN(x));
        }

        function validateInput() {
            const min = parseInt(document.getElementById('min').value);
            const max = parseInt(document.getElementById('max').value);
            const count = parseInt(document.getElementById('count').value);
            const targets = parseTargets(document.getElementById('targets').value);
            const errorElement = document.getElementById('error');
            
            // 清除旧错误提示
            errorElement.textContent = "";

            // 基础验证
            if (isNaN(min) || isNaN(max) || isNaN(count)) {
                errorElement.textContent = "请输入有效的数字";
                return false;
            }

            if (min >= max) {
                errorElement.textContent = "最小值必须小于最大值";
                return false;
            }

            // 必抽数字验证
            const validTargets = targets.filter(t => t >= min && t <= max);
            const uniqueTargets = [...new Set(validTargets)];
            
            if (validTargets.length !== targets.length) {
                errorElement.textContent = "包含无效或超出范围的数字";
                return false;
            }
            
            if (uniqueTargets.length !== targets.length) {
                errorElement.textContent = "必抽数字不能重复";
                return false;
            }

            // 数量关系验证
            const maxCount = max - min + 1;
            if (count > maxCount) {
                errorElement.textContent = `总抽取数量不能超过${maxCount}`;
                return false;
            }

            if (targets.length > count) {
                errorElement.textContent = "必抽数量不能超过总抽取数";
                return false;
            }

            if ((count - targets.length) > (maxCount - targets.length)) {
                errorElement.textContent = "可用数字不足，请扩大范围或减少抽取数";
                return false;
            }

            return true;
        }

        function generateNumbers(min, max, count, targets) {
            const mustHave = new Set(targets);
            const remaining = max - min + 1 - mustHave.size;
            const needRandom = count - mustHave.size;
            
            // 生成候选池（排除必抽数字）
            const pool = [];
            for (let i = min; i <= max; i++) {
                if (!mustHave.has(i)) pool.push(i);
            }

            // 随机选择剩余数字
            const randomNumbers = [];
            while (randomNumbers.length < needRandom) {
                const index = Math.floor(Math.random() * pool.length);
                randomNumbers.push(pool.splice(index, 1)[0]);
            }

            // 合并结果并打乱顺序
            const result = [...targets, ...randomNumbers];
            return result.sort(() => Math.random() - 0.5);
        }

        function startDraw() {
            if (isDrawing) return;
            if (!validateInput()) return;

            isDrawing = true;
            const min = parseInt(document.getElementById('min').value);
            const max = parseInt(document.getElementById('max').value);
            const count = parseInt(document.getElementById('count').value);
            const targets = parseTargets(document.getElementById('targets').value);
            const resultElement = document.getElementById('result');
            
            let animationCount = 0;
            const duration = 1500;
            const startTime = Date.now();
            let finalNumbers = [];

            // 生成最终结果
            finalNumbers = generateNumbers(min, max, count, targets);
            
            resultElement.style.color = '#2ecc71';
            resultElement.textContent = "";

            drawInterval = setInterval(() => {
                const progress = (Date.now() - startTime) / duration;
                
                if (progress >= 1) {
                    clearInterval(drawInterval);
                    resultElement.textContent = finalNumbers.join(', ');
                    isDrawing = false;
                    return;
                }

                // 生成包含必抽数字的临时结果
                const tempNumbers = generateNumbers(min, max, count, targets);
                resultElement.textContent = tempNumbers.join(', ');
                
                // 动画速度控制
                if (progress > 0.7) {
                    animationCount++;
                    if (animationCount % 2 === 0) return;
                }
            }, 50);
        }

        // 新增事件监听
        document.getElementById('targets').addEventListener('input', validateInput);
        document.getElementById('min').addEventListener('input', validateInput);
        document.getElementById('max').addEventListener('input', validateInput);
        document.getElementById('count').addEventListener('input', validateInput);
    </script>
</body>
</html>